<template>
  <div class="setmeal">
     <el-form :inline="true" :model="content1" class="demo-form-inline">
      <el-form-item >
        <el-input v-model="content1.name" placeholder="查询套餐名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round icon="el-icon-search" @click="onSubmit"
          >查询</el-button>
      </el-form-item>
    </el-form>
    <el-container>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="mini"
        round
        @click="add()"
        >添加</el-button>
    </el-container>
    <el-table 
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    :data="tableData">
      <el-table-column label="套餐编码" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="套餐名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>助记名: {{ scope.row.helpcode }}</p>
            <p>适用性别:
                  <span v-if="scope.row.sex == 0">女</span>
                  <span v-if="scope.row.sex == 1">男</span>
                  <span v-if="scope.row.sex == 2">不限</span>
                </p>
            <p>适用年龄: {{ scope.row.minage }}-{{scope.row.maxage}}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="套餐价格" width="180">
        <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="套餐介绍" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.remark }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.remark }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="warning"
            round
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>

          <el-button
            size="mini"
            type="danger"
            round
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content1.page1"
      :page-sizes="[1, 2, 3]"
      :page-size="content1.num1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-tabs>
        <el-tab-pane label="基本信息">
        <el-form-item label="姓名" :label-width="formLabelWidth"  prop="name">
          <el-input v-model="form.name" style="width: 200px" autocomplete="off" @blur="byid()" :disabled="bj2"></el-input>
        </el-form-item>
         <el-form-item label="套餐助记" :label-width="formLabelWidth" prop="helpcode">
          <el-input v-model="form.helpcode" style="width: 200px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="适用性别" :label-width="formLabelWidth" prop="sex">
          <el-select v-model="form.sex"  placeholder="请选择">
            <el-option label="不限" value="2">不限</el-option>
            <el-option label="男" value="1">男</el-option>
            <el-option label="女" value="0">女</el-option>
          </el-select>
        </el-form-item>
        <!-- 文件上传 -->
                       <el-form-item>
      <el-upload
        class="upload-demo"
        ref="upload"
        action=""
        :http-request="upload"
        multiple=""
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
      <!--   <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        > -->
     
      </el-upload>
    </el-form-item>
       
        <el-form-item label="年龄下限" :label-width="formLabelWidth">
         <el-input @blur="ss()" v-model="form.minage" style="width: 200px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄上限" :label-width="formLabelWidth">
         <el-input @blur="sx()" v-model="form.maxage" style="width: 200px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐价格:" :label-width="formLabelWidth">
           <el-input @blur="jg()" v-model="form.price" style="width: 200px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐介绍" :label-width="formLabelWidth">
          <el-input type="textarea" style="width: 200px" v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="注意事项" :label-width="formLabelWidth">
          <el-input type="textarea" style="width: 200px" v-model="form.attention" autocomplete="off"></el-input>
        </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="项目信息">
           <div style="width: 600px; margin-left: 10px">
          <el-form :inline="true" :model="content2" class="demo-form-inline">
            <el-form-item label="">
              <el-input
                v-model="content2.name"
                placeholder="检查项名称"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="onSubmit()"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <el-table @selection-change="handleSelectionChange" height="450" :data="tcheck" ref="multipleTable">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="项目编码" width="200">
              <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <span>{{ scope.row.code }}</span>
                  </div>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目介绍" width="200">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.attention }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.attention }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
        </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogFormVisible = false" style="margin-top: -45px;">取 消</el-button>
        <el-button round type="primary"   @click="submitUpload" :disabled="bj1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
export default Vue.extend({
   name: "UploadUi",
  data(){
   
    return{
       rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
           helpcode: [
            { required: true, message: '请输入套餐助记', trigger: 'blur' },
           
          ],
            sex:[
                 { required: true, message: '请选择活动区域', trigger: 'change' }
            ]
          },
      loading:true,
      tableData: [],
      tcheck:[],
      total: 0,
      content1: {
        page1: 1,
        num1: 3,
        name: "",
      },
      content2: {
        name: "",
      },
      bj1:false,
      bj2:false,
      form:{
        id:'',
        name:'',
        code:'',
        helpcode:'',
        sex:'',
        maxage:'',
        minage:'',
        price:'',
        remark:'',
        attention:'',
        createtime:'',
        checkId:'',
      },
      bj:'',
      formLabelWidth: "80px",
      dialogFormVisible : false,
      multipleSelection: [],
    }
  },
  methods:{
      ss(){
var regs = /^\d{2,}$/;
		if(regs.test(this.form.minage)) {
			return true;
		} else {
        this.$message('只能输入数字');
			return false;
		}
  },
   sx(){
var regs = /^\d{2,}$/;
		if(regs.test(this.form.maxage)) {
			return true;
		} else {
        this.$message('只能输入数字');
			return false;
		}
  },
   jg(){
var regs = /^\d{2,}$/;
		if(regs.test(this.form.price)) {
			return true;
		} else {
        this.$message('只能输入数字');
			return false;
		}
  },
      resetForm(form) {
        this.$refs[form].resetFields();
      },
    //表格复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //查询套餐编码是否存在
    byid(){
      axios.get("/api/tsetmeal/byId?code="+this.form.name).then(data=>{
        if(data.data==2){
          this.bj1=true;
        }else{
          this.bj1=false;
        }
      })
    },
    //获取每页条数的方法
    handleSizeChange(val) {
      this.content1.num1 = val;
      this.load();
      // console.log(`每页 ${val} 条`);
    },
    //获取当前页的方法
    handleCurrentChange(val) {
      this.content1.page1 = val;
      this.load();
      // console.log(`当前页: ${val}`);
    },
    //多条件查询方法
    onSubmit() {
      this.load();
      this.load1();
    },
    //自动选中多选框（编辑）
    handleEdit(index, row) {
      this.bj1=false;
      this.bj2=true;
      this.dialogFormVisible=true;
      this.form=row;
      this.bj=false;
      axios.post("/api/checkgrou/findList2", this.content2).then((data) => {
        this.tcheck = data.data; //获取套餐表分页数据
        
        axios.get("/api/tsetmeal/getBytsetid?tsetid="+row.id).then(res=>{
         let aa=res.data;
         let dd= data.data;
        for(var i=0;i<aa.length;i++){
         for(var j=0;j<dd.length;j++){
            if(aa[i].checkgroupId==dd[j].checkitem_id){
              this.$refs.multipleTable.toggleRowSelection(dd[j])
             }
            }
          }
       })
      });
       
    },
    //单条套餐删除
    handleDelete(index,row){
      this.$confirm('此操作将永久删除该套餐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axios.get("/api/tsetmeal/delId?id="+row.id).then(data=>{
            if(data.data==1){
            this.load();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
              }else{
                  this.$message({
                  type: 'info',
                  message: '此套餐有用户预约，不能删除!!'
                 });
               }
           });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
       //添加
      
    add() {
      this.form={};
      this.dialogFormVisible = true;
      this.load1();
      this.bj=true;
      this.bj2=false;
      
    },
    updStu() {

       
      
     
    },
    load(){
       axios.post("/api/tsetmeal/findAll", this.content1).then((data) => {
        this.tableData = data.data.rows; //获取套餐表分页数据
        this.total = data.data.total; //获取套餐表总记录数

        //加载样式
        setTimeout(() => {
          this.loading=false;
        }, 1000);

      });
    },

    //文件上传
     
    submitUpload() {
      this.$refs.upload.submit();
    },
    //通过onchanne触发方法获得文件列表
    handleChange(file, fileList) {
      this.fileList = fileList;
      console.log(fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    upload(file) {
      let fd = new FormData();
        console.log(file.file)
     
      console.log(fd);


       this.$refs.form.validate((valid) => {
          if (valid) {
            let upd = new Date();
      var y = upd.getFullYear();
      var m = (upd.getMonth() + 1).toString().padStart(2, "0");
      var d = upd.getDate().toString().padStart(2, "0");
      var tim = y + "-" + m + "-" + d;
     
      let ii='';
        this.multipleSelection.forEach(element => {
          ii+=element.checkitem_id+",";
        });
        if(this.form.minage>this.form.maxage){
           this.$message({
           type: 'info',
           message: '年龄下限必须小于年龄上限，请选择输入！！'
            });
        }else{
        if(ii==""){
           this.$message({
           type: 'info',
           message: '您还未选择检查项，请选择！！'
            });
        }else{
        this.form.checkId=ii;
      if(this.bj){
         this.form.createtime=tim;
          //文件信息中raw才是真的文件
      fd.append("files", file.file);
       fd.append("files1", JSON.stringify(this.form));
        fd.append("files2", this.form.checkId);
        axios.post("/api/tsetmeal/addse",fd).then((data) => {
            if(data.data==1){
                this.$message({
                message: '恭喜你，添加成功！！！',
                type: 'success'
                
                });
                this.dialogFormVisible = false 
            }
        });
      }else{
        axios.get("/api/tsetcheckgroup/updsmcg?setid="+this.form.id+"&checkid="+this.form.checkId+"&tim="+tim+"&tsetmeal="+JSON.stringify(this.form)).then(data=>{
            if(data.data==1){
                this.$message({
                message: '恭喜你，修改成功！！！',
                type: 'success'
                });
                this.dialogFormVisible = false 
            }
        })
      }
    }
  }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },

    load1(){
      axios.post("/api/checkgrou/findList2", this.content2).then((data) => {
        this.tcheck = data.data; //获取套餐表分页数据
        //获取套餐表总记录数
      });
    },
  },
  created(){
    this.load();
  }
})
</script>
<style scoped>

</style>
